<script setup lang="ts">
import type { CascaderDiff } from '../..'
import { defaultConfirmBoxTips } from '../../constants/defaultValue'
import ConfirmBoxCard from './ConfirmBoxCard.vue'
import OperationAction from './OperationAction.vue'
import RiskCard from './RiskCard.vue'

export type ConfirmBoxProps = {
  diff?: CascaderDiff[]
  risks?: string[]
  tips?: string[]
}

const props = withDefaults(defineProps<ConfirmBoxProps>(), {
  diff: () => [],
  tips: () => defaultConfirmBoxTips,
  risks: () => []
})
const isShowOperationActionCard = computed(() => {
  const tipDiff = props.diff.filter((item) => item.diffType !== 'SORT').length
  return tipDiff > 0
})
</script>

<template>
  <div class="cascader-confirm-box">
    <confirm-box-card body-class="tips-wrapper">
      <div v-for="(tip, i) in tips" :key="i" class="text-2">{{ tip }}</div>
    </confirm-box-card>
    <risk-card v-if="risks.length" :risks="risks" />
    <operation-action v-if="isShowOperationActionCard" :diff="diff" />
  </div>
</template>

<style lang="less" scoped>
.cascader-confirm-box {
  width: 100%;
  :deep(.changed-description) {
    display: inline-flex;
    gap: 8px;
  }
}
</style>
